<template>
	<div class="playList">
		<div class="title"><span>今日赛事</span></div>
		<ul v-if='list.length > 0'>
	      <router-link
	        tag="li"
	        v-for="item of list"
	        :key="item.mid"
          :data-mid = 'item.mid'
	        :to="'/DeatilLQ/' + item.mid"
	      >
	       <p class="li-tit">
          <span>{{ item.ln }}<font>{{ item.sd}}</font></span>
          <!--进行中-->
          <font class="state">
             <i v-if='item.sts == "inprogress"' class="redColor">
              <template v-if='item.current_quarter=="halftime"'>
                中场休息
              </template>
              <template v-if='item.current_quarter=="ext"'>
                加时赛
              </template>
              <template v-if='item.hm_p1'>
                上半场
              </template>
              <template v-if='item.hm_p2'>
                下半场
              </template>
              <template v-else>
                第{{ item.current_quarter }}节<b class="dian">'</b>
              </template>
            </i>
            <i v-else-if='item.sts == "notstarted"'>未开始</i>
            <i v-else-if='item.sts == "finished"'>已结束</i>
            <i v-else>取消</i>
          </font>
         
        </p>
        <div class="li-con">
          <div class="li-con-left">
            <img :src='getImgUrl(item.hig)' :onerror="noImg">
            <span>
              <template v-if='item.sts == "notstarted"'>
                {{item.hz}}
              </template>
              <template v-else>
                {{item.hz | ellipses("10")}}
              </template>
            </span>
            <div class="bifen">
              <template v-if='item.type==3'>
                <!--四节-->
                <span v-if='item.hm_q1'>{{ item.hm_q1 }}</span>
                <span v-if='item.hm_q2'>{{ item.hm_q2 }}</span>
                <span v-if='item.hm_q3'>{{ item.hm_q3 }}</span>
                <span v-if='item.hm_q4'>{{ item.hm_q4 }}</span>
                <span v-if='item.hm_ext'>{{ item.hm_ext }}</span>
                <span v-if='item.hm_rs&&item.hm_rs!=0' class="redColor">{{ item.hm_rs }}</span>
              </template>
              <template v-if='item.type==2'>
                <!--上下半场-->
                <span v-if='item.hm_p1'>{{ item.hm_p1 }}</span>
                <span v-if='item.hm_p2'>{{ item.hm_p2 }}</span>
                <span v-if='item.hm_rs&&item.hm_rs!=0' class="redColor">{{ item.hm_rs }}</span>
              </template>
            </div>
          </div>
          <div class="li-con-right">
            <img :src='getImgUrl(item.aig)' :onerror="noImg">

            <span>
                <template v-if='item.sts == "notstarted"'>
                {{item.az}}
              </template>
              <template v-else>
                {{item.az | ellipses("6")}}
              </template>
            </span>
            <div class="bifen">
              <template v-if='item.type==3'>
                <!--四节-->
                <span v-if='item.aw_q1'>{{ item.aw_q1 }}</span>
                <span v-if='item.aw_q2'>{{ item.aw_q2 }}</span>
                <span v-if='item.aw_q3'>{{ item.aw_q3 }}</span>
                <span v-if='item.aw_q4'>{{ item.aw_q4 }}</span>
                <span v-if='item.aw_rs&&item.aw_rs!=0' class="redColor">{{ item.aw_rs }}</span>
              </template>
              <template v-if='item.type==2'>
                <!--上下半场-->
                <span v-if='item.aw_p1'>{{ item.aw_p1 }}</span>
                <span v-if='item.aw_p2'>{{ item.aw_p2 }}</span>
                <span v-if='item.aw_rs&&item.aw_rs!=0' class="redColor">{{ item.aw_rs }}</span>
              </template>
            </div>
          </div>
        </div>
	      </router-link>
	    </ul>
      <p v-else class="noData">暂无比赛</p>
	</div>
	
</template>
<script>
import { socket } from 'jss/home/webSocket_lq.js'
	export default{
		name:'HomeListLQ',
    props:{
      list:Array,
    },
    data:function(){
      return {
        noImg:'this.src="/static/img/basket.png"',
      }
    },
    methods:{
       getImgUrl:function(_url) {
        return _url
       }
    },
    mounted () {
     var socketSerive = socket,t=this;
      socketSerive.addEventListener('message',function(event){
        const  data = JSON.parse(event.data).data;
        const Fdata = data.f //所有结束的比赛信息
        const Idata = data.in //所有正在进行中的比赛信息
        const Cdata = data.c //所有取消的比赛信息
        if (Idata.length == 0) {socketSerive.close(); return false}
        $.each(Idata,function(index,item){
          //主队 
          var mHtml = '',mStateHtml='';
          //客队 
          var aHtml = '',aStateHtml='';
          if (item.type == 3) {//4节
            if (item.hm_q1) {
              mHtml+='<span>'+item.hm_q1+'</span>'
              aHtml+='<span>'+item.aw_q1+'</span>'
            }
            if (item.hm_q2) {
              mHtml+='<span>'+item.hm_q2+'</span>'
              aHtml+='<span>'+item.aw_q2+'</span>'
            }
            if (item.hm_q3) {
              mHtml+='<span>'+item.hm_q3+'</span>'
              aHtml+='<span>'+item.aw_q3+'</span>'
            }
            if (item.hm_q4) {
              mHtml+='<span>'+item.hm_q4+'</span>'
              aHtml+='<span>'+item.aw_q4+'</span>'
            }
            if (item.hm_ext) {
              mHtml+='<span>'+item.hm_ext+'</span>'
              aHtml+='<span>'+item.aw_ext+'</span>'
            }
            if (item.hm_rs) {
              mHtml+='<span class="redColor">'+item.hm_rs+'</span>'
              aHtml+='<span class="redColor">'+item.aw_rs+'</span>'
            }
          }else{//半场
            if (item.hm_p1) {
              mHtml+='<span>'+item.hm_p1+'</span>'
              aHtml+='<span>'+item.aw_p1+'</span>'
            }
            if (item.hm_p2) {
              mHtml+='<span>'+item.hm_p2+'</span>'
              aHtml+='<span>'+item.aw_p2+'</span>'
            }
            if (item.hm_ext) {
              mHtml+='<span>'+item.hm_ext+'</span>'
              aHtml+='<span>'+item.aw_ext+'</span>'
            }
            if (item.hm_rs) {
              mHtml+='<span class="redColor">'+item.hm_rs+'</span>'
              aHtml+='<span class="redColor">'+item.aw_rs+'</span>'
            }
          }
          if (item.current_quarter=="halftime") {
            mStateHtml = '中场休息'
          }else if (item.current_quarter=="ext") {
            mStateHtml = '加时赛'
          }else if (item.hm_p1) {
            mStateHtml = '上半场'
          }else if (item.hm_p2) {
            mStateHtml = '下半场'
          }else{
            mStateHtml = '第'+item.current_quarter+'节<b class="dian">\'</b>';
          }
          $('li[data-mid='+item.mid+']').find('.li-con-left .bifen').html(mHtml)
          $('li[data-mid='+item.mid+']').find('.li-con-right .bifen').html(aHtml)
          $('li[data-mid='+item.mid+']').find('.state').html('<i class="redColor">'+mStateHtml+'</i>')
        })
        $.each(Fdata,function(index,item){
          //主队 
          var mHtml = '';
          //客队 
          var aHtml = '';
          if (item.type == 3) {//4节
            mHtml+='<span>'+item.hm_q1+'</span><span>'+item.hm_q2+'</span><span>'+item.hm_q3+'</span><span>'+item.hm_q4+'</span>'
            aHtml+='<span>'+item.aw_q1+'</span><span>'+item.aw_q2+'</span><span>'+item.aw_q3+'</span><span>'+item.aw_q4+'</span>'
            if (item.hm_ext) {
              mHtml+='<span>'+item.hm_ext+'</span>'
              aHtml+='<span>'+item.aw_ext+'</span>'
            }
            if (item.hm_rs) {
              mHtml+='<span class="redColor">'+item.hm_rs+'</span>'
              aHtml+='<span class="redColor">'+item.aw_rs+'</span>'
            }
          }else{//半场
              mHtml+='<span>'+item.hm_p1+'</span><span>'+item.hm_p2+'</span>'
              aHtml+='<span>'+item.aw_p1+'</span><span>'+item.aw_p2+'</span>'
            if (item.hm_ext) {
              mHtml+='<span>'+item.hm_ext+'</span>'
              aHtml+='<span>'+item.aw_ext+'</span>'
            }
            if (item.hm_rs) {
              mHtml+='<span class="redColor">'+item.hm_rs+'</span>'
              aHtml+='<span class="redColor">'+item.aw_rs+'</span>'
            }
          }
          $('li[data-mid='+item.mid+']').find('.li-con-left .bifen').html(mHtml)
          $('li[data-mid='+item.mid+']').find('.li-con-right .bifen').html(aHtml)
          $('li[data-mid='+item.mid+']').find('.state').html("已结束")
        })
      });
      this.$once('hook:beforeDestroy', function () {
        socketSerive.close()
      })
    },
    activated () {},
    updated (){},
    destroyed(){}
	};
</script>
<style lang="less" scoped>
  @import '~styles/varibles.less';
  .playList{
    padding-top:3.2rem;
    padding-bottom:.1rem; 
  }
  .title{
    padding: .25rem;
    text-align: left; 
    span{
      font-size: .34rem;
      font-weight: bold;
      height: .27rem;
      line-height: .27rem;
      overflow: hidden;
      border-left:.06rem @greenColor solid;
      padding-left:.18rem;
    }
  }
  .li-tit{
    height: .49rem;
    line-height: .49rem;
    display: flex;
    padding:0 .25rem;
    justify-content: space-between;
    background: #F5F8FB;
    span{
      flex: 1;
      color: #828181;
      font{
        margin-left:.4rem;
        color: #2F2F2F;
      }
    }
    i{
      font-size: .22rem;
      color: #828181;
    }
  }
  .li-con{
    padding:.25rem;
    .li-rank{
      font-size: .22rem;
      color: @grayColor;
    }
    .li-con-left,.li-con-right{
      padding:.1rem 0;
      display: flex;
      align-items:center;
      img {
        width: .5rem;
        height: .5rem;
        margin-right: .2rem;
      }
      p{
        vertical-align: text-bottom;
      }
      .bifen{
        text-align: right;
        flex: 1;
        padding-right: .2rem;
      }
    }
  }
  .noData{
    padding:0.5rem 0;
    text-align: center;
    color: @grayColor
  }
</style>